<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
	<title>抽奖活动</title>
	<script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/require.min.js"></script>
	<script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/loader.js"></script>
	<script type="text/javascript" src="/js/require.config.js"></script>
	<script type="text/javascript">
	require(["core"], function() {
		require(["./js/pages/lottery","./js/pages/top"],function (argument) {
			window.removeLoader();	   	
		});
	});
	</script>
</head>
<body>
	<div style="display:none;" id="jSouperApp" class="_pc">
		{{#include "pages/default/top.html"}}
		<!-- nav-bar -->
		{{#include "./pages/default/nav-bar.html"}}

	<xmp>
	<div class="lottery-list">
		{{#each $Cache.lottery.list}}
		<div class="lottery-item">
			<div class="lottery-item-info">
				<h4>{{title}}</h4>
				<p>创建时间：{{#Time create_time}}</p>
				<p>开始时间：{{#Time startTime,"YYYY-MM-DD HH:mm"}}</p>
				<p>结束时间：{{#Time endTime,"YYYY-MM-DD HH:mm"}}</p>
				<p>参与人数：{{joined_numner}}</p>
				<div class="awards">
				{{#each awards}}
					<div class="awards-item">
						<h5>{{title}}</h5>
						<div>
							<p>奖品（{{#MapValue type,$Top.config.LOTTERY_TYPE}}）：</p>
							{{#> "lottery-award-"+type,"content"}}
						</div>
						<p>奖品数量：{{win_number}}</p>
						<p>中奖人数：{{winner_list.length}}</p>
					</div>
				{{/each}}
				</div>
			</div>
			<div class="lottery-item-operate">
				{{#if (state===$Top.config.LOTTERY_STATE.进行中&&endTime>$Top.$Cache.now)||(state===$Top.config.LOTTERY_STATE.未开始&&$Top.$Cache.now>startTime) }}
				<div class="timeline">
				{{#if (endTime==$Top.NUMBER_MAX_VALUE)}}
				<h4>抽奖活动正在进行，不定期结束</h4>
				{{#else}}
				<h4>抽奖活动正在进行，结束倒计时：</h4>
				<countdown
					from = "{{startTime}}"
					to   = "{{endTime}}"
				></countdown>
				{{/if}}
				</div>
					{{#if $Top.loginer}}
						{{#if _can_user_draw_lottery}}
							<button event-click="{{'$Top.$Event.lottery.user_draw_lottery'}}">抽奖</button>
						{{#else}}
							<i>您已经抽过奖，</i>
							{{#if _user_win_something}}
							被抽中奖品：
								{{#> "lottery-award-"+_user_win_something.type,"_user_win_something.content" }}
							{{#else}}
							<i>没有获得奖品</i>
							{{/if}}
						{{/if}}
					{{#else}}
						<i>您还未登录</i>
					{{/if}}
				{{/if}}
				{{#if $Top.$Cache.now>endTime}}
					<h4>抽奖已经结束</h4>
				{{/if}}
			</div>
		</div>
		{{/each}}
	</div>
	</xmp>

		{{#include "pages/default/bottom.html"}}

		<xmp type="template" name="lottery-award-ticket_factory">
			<div class="lottery-award-ticket_factory">
				<h6>{{info.name}}</h6>
				<p class="intro-content">{{info.intro}}</p>
			</div>
		</xmp>
		<xmp type="template" name="lottery-award-goods">
			<a href="/goods-details.html?id={{_id}}">
				<div class="lottery-award-goods {{preview_img_url&&' has-img'}}">
					<div class="-preview_img" style="background-image:{{$CPrivate.icon_url?('url('+$CPrivate.icon_url+')'):'none'}}"></div>
					<div class="-inner">
						<h6 preview-img-url="{{preview_img_url}}">{{goods_name}}</h6>
						<p class="intro-content">{{#if intro}}{{intro}}{{#else}}<i>暂无奖品介绍</i>{{/if}}</p>
					</div>
				</div>
			</a>
			<script type="text/vm">
function(vm) {
	var warpNode = vm.queryElement(function(_node) {
		return _node.className.indexOf("lottery-award-goods") !== -1
	})[0];
	var node = vm.getOneElementByTagName("h6");
	jSouper.onElementPropertyChange(node, "preview-img-url", function(key, value) {
		//将图片智能裁剪并显示成背景
		require(["smartcrop-toimg"], function(smartCropToImg) {
			smartCropToImg("http://" + location.host + "/proxy?url=" + encodeURIComponent(value), {
				width: warpNode.clientWidth,
				height: warpNode.clientHeight
			}, function(base64) {
				vm.set("$CPrivate.icon_url", base64);
			});
		});
	}, true)
}
			</script>
		</xmp>
		<xmp type="template" name="lottery-award-_custom_award">
			<div class="lottery-award-_custom_award {{img_url&&' has-img'}}">
				<div class="-preview_img" style="background-image:{{$CPrivate.icon_url?('url('+$CPrivate.icon_url+')'):'none'}}"></div>
				<div class="-inner">
					<h6 img-url="{{img_url}}">{{title}}</h6>
					<p class="intro-content">{{#if intro}}{{intro}}{{#else}}<i>暂无奖品介绍</i>{{/if}}</p>
				</div>
			</div>
			<script type="text/vm">
function(vm) {
	var warpNode = vm.queryElement(function(_node) {
		return _node.className.indexOf("lottery-award-_custom_award") !== -1
	})[0];
	var node = vm.getOneElementByTagName("h6");
	jSouper.onElementPropertyChange(node, "img-url", function(key, value) {
		//将图片智能裁剪并显示成背景
		require(["smartcrop-toimg"], function(smartCropToImg) {
			smartCropToImg("http://" + location.host + "/proxy?url=" + encodeURIComponent(value), {
				width: warpNode.clientWidth,
				height: warpNode.clientHeight
			}, function(base64) {
				vm.set("$CPrivate.icon_url", base64);
			});
		});
	}, true)
}
			</script>
		</xmp>
	</div>

</body>
</html>